<template>
  <div class="repair_report_list">
    <Row type="flex" justify="space-between" class="repair_report_listt-edit">
      <Form class="from" style="width: 100%" label-position="left" inline>
        <Row type="flex" justify="space-between">
          <Row>
            <FormItem class="form-item" :label-width="72">
              <div slot="label" style="transform: translateX(12px);">门店名称：</div>
              <!--  moms:assets:machineconfigview -->
              <vueTreeselectChoice
                :multiple="true"
                ref="vueTreeselectChoice"
                @input="handleShop"
                @on-api-finish="apiFinish"
                permissionCode="moms:assets:machineconfigview"
                v-model="ShopValue"
              ></vueTreeselectChoice>
              <!-- <Select @on-change="search" style="width:180px" filterable v-model="searchObj.shopId" label-in-value>
                <Option v-for="item in shopList" :label="item.shopName" :value="item.shopId" :key="item.shopId">{{
                  item.shopName
                }}</Option>
              </Select> -->
            </FormItem>

            <FormItem class="form-item" :label-width="72">
              <div slot="label" style="transform: translateX(12px);">监控状态：</div>
              <Select
                class="select-shop-item"
                @on-change="search"
                v-model="searchObj.machineStatus"
                :max-tag-count="1"
                style="width:180px"
              >
                <Option v-for="(item, index) in rank" :key="index" :value="item.value">{{ item.name }}</Option>
              </Select>
            </FormItem>

            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">机台分类：</div>
              <Select
                class="select-shop-item"
                @on-change="search"
                v-model="searchObj.machineCategoryId"
                :max-tag-count="1"
                style="width:180px"
              >
                <Option v-for="(item, index) in machineList" :key="index" :value="item.machineCategoryId">{{
                  item.name
                }}</Option>
              </Select>
            </FormItem>

            <FormItem>
              <Button class="search-btn" @click="search" type="primary">查询</Button>
            </FormItem>
            <FormItem>
              <Button class="search-btn" @click="handleReset">重置</Button>
            </FormItem>
          </Row>

          <Row>
            <FormItem>
              <Button @click="shosMoreSearch = !shosMoreSearch" class="coinrevenue-btn2 concrete-data">
                {{ shosMoreSearch ? '收起筛选' : '更多筛选' }}
                <Icon :type="shosMoreSearch ? 'ios-arrow-up' : 'ios-arrow-down'" />
              </Button>
            </FormItem>
          </Row>
        </Row>
        <Row type="flex" justify="space-between">
          <Row>
            <FormItem v-show="shosMoreSearch" class="form-item" :label-width="72">
              <div slot="label" style="transform: translateX(12px);">关键字：</div>
              <Input v-model="searchObj.machineInstanceName" style="width:180px" />
            </FormItem>

            <FormItem v-show="shosMoreSearch" class="form-item" :label-width="72">
              <div slot="label" style="transform: translateX(12px);">维修流程</div>
              <Select
                class="select-shop-item"
                @on-change="search"
                v-model="searchObj.repaiStatus"
                :max-tag-count="1"
                style="width:180px"
              >
                <Option v-for="(item, index) in maintain" :key="index" :value="item.value">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Row>

          <Row>
            <FormItem>
              <Button @click="handleExport" v-if="hasPermission('moms:assets:machineconfigexport')" type="primary"
                >导出</Button
              >
            </FormItem>
          </Row>
        </Row>
      </Form>
    </Row>
    <Table
      :max-height="resData.length > 10 ? 530 : 0"
      :loading="isloading"
      stripe
      :columns="columns"
      :data="resData"
      class="table-list"
    ></Table>
    <div class="page-box">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
import { machineMonitor, machineMonitorExport } from '@/api/asset/repair/asset-manage'
import { machineCategoryList } from '@/api/setting'
// import dayjs from 'dayjs'
import { blobToXls } from '@/libs/blobToXls'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import errorCaptured from '@/libs/errorCaptured'
export default {
  name: 'asset_machine_monitor',
  components: { vueTreeselectChoice },
  data () {
    return {
      searchObj: {
        merchantId: this.$store.state.user.merchantId,
        shopId: '',
        machineCategoryId: -1,
        machineStatus: -1, // 监控状态
        repaiStatus: -1,
        machineInstanceName: '',
        limit: 10,
        offset: 0,
        pageIndex: 1
      },
      total: 0,
      shosMoreSearch: false,
      //  _apiFunction: getReportList,
      shopList: [],
      machineList: [{ machineCategoryId: -1, name: '全部' }],
      statusOption: [],
      isloading: false,
      ShopValue: [],
      // 监控状态
      rank: [
        { name: '全部', value: -1 },
        { name: '未开机', value: '7' },
        { name: '3天无营收', value: '0,2,3' },
        { name: '7小时未开机', value: '0,4' },
        { name: '未开机', value: '6,0,2,4' }
      ],
      // 维修
      maintain: [
        { name: '全部', value: -1 },
        { name: '未修讫', value: 0 },
        { name: '保修中', value: 1 },
        { name: '已寄件', value: 2 },
        { name: '已寄回', value: 3 },
        { name: '已修讫', value: 4 },
        { name: '返修中', value: 5 },
        { name: '无法修理', value: 6 },
        { name: '已结束', value: 7 }
      ],
      resData: [],
      columns: [
        {
          type: 'index',
          fixed: 'left',
          title: '序号',
          align: 'center'
        },
        { title: '门店名称', key: 'shopName', align: 'center' },
        { title: '一级分类', key: 'machineCategoryName', align: 'center' },
        { title: '机台名称', key: 'machineInstanceName', align: 'center' },
        { title: '游戏位', key: 'machineInstanceSlotNo', align: 'center' },
        {
          title: '状态',
          key: 'machineStatus',
          align: 'center',
          render: (h, params) => {
            // console.log(params.row.machineStatus)
            let colors = {
              6: '#7E8695',
              0: '#FF2900',
              2: '#FF2900',
              3: '#FF2900',
              4: '#FF2900',
              7: '#00C172'
            }
            return h('i', {
              class: ['iconsys', 'iconjingshideng'],
              style: { color: colors[params.row.machineStatus] }
            })
          }
        },
        { title: '维修流程',
          key: 'repairStatus',
          align: 'center',
          render: (h, params) => {
            let value = ''
            this.maintain.forEach(item => {
              if (item.value === Number(params.row.repairStatus)) {
                value = item.name
              }
            })
            return h('span', value)
          }
        },
        { title: '触发时间', key: 'lastConnectTime', align: 'center' },
        { title: '统计时间', key: 'lastDisconnectTime', align: 'center' },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('i', {
                class: ['iconsys', 'iconshenhe'],
                attr: { title: '创建' },
                on: {
                  click: () => {
                    let {
                      shopId,
                      machineInstanceId,
                      machineInstanceSlotId,
                      merchantId,
                      machineInstanceName,
                      machineInstanceSlotNo
                    } = params.row
                    this.$router.push({
                      name: 'asset_machine_monitor_check',
                      query: {
                        shopId,
                        machineInstanceId,
                        machineInstanceSlotId,
                        merchantId,
                        machineInstanceName,
                        machineInstanceSlotNo
                      }
                    })
                    console.log(params.row)
                  }
                }
              })
            ])
          }
        }
      ]
    }
  },
  created () {
    // this.getShopList()
    this.machineCategoryList()
    this.getList()
  },
  methods: {
    maxTagPlaceholder (num) {
      return '...'
    },
    search () {
      if (this.searchObj.limit) {
        this.searchObj.limit = 10
        this.searchObj.offset = 0
      }
      this.getList()
    },

    async handleShop () {
      const ids = await this.$refs.vueTreeselectChoice.getShopId()
      this.searchObj.shopId = ids.join(',')
      this.search()
    },
    async apiFinish (isId) {
      if (isId) this.ShopValue = [this.$store.state.user.orgId]
    },
    // 改变分页大小
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      if (this.searchObj.pageIndex === 1) {
        this.getList()
      } else {
        this.searchObj.pageIndex = 1
      }
      // this.getShopList()
    },
    // 改变分页
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.getList()
    },
    // 获取列表
    async getList () {
      let params = {}
      Object.keys(this.searchObj).forEach(key => {
        if (this.searchObj[key] === -1) {
          params[key] = ''
        } else {
          params[key] = this.searchObj[key]
        }
      })
      const [err, res] = await errorCaptured(machineMonitor, params)
      if (err) return
      this.resData = res.data.data || []
      this.total = res.data.totalCount
    },
    // 导出
    async handleExport () {
      let params = {}
      Object.keys(this.searchObj).forEach(key => {
        if (this.searchObj[key] === -1) {
          params[key] = ''
        } else {
          params[key] = this.searchObj[key]
        }
      })
      const res = await machineMonitorExport(params)
      blobToXls(res.data, `机台统一监控列表${dayjs().format('YYYY-MM-DD HH:mm:ss')}`)
    },
    handleReset () {
      this.searchObj = {
        merchantId: this.$store.state.user.merchantId,
        shopId: '',
        machineCategoryId: -1,
        machineStatus: -1, // 监控状态
        repaiStatus: -1,
        machineInstanceName: '',
        limit: 10,
        offset: 0,
        pageIndex: 1
      }
      this.search()
    },

    async machineCategoryList () {
      const res = await machineCategoryList({
        // 'dwj' ||
        merchantId: this.$store.state.user.merchantId // 商户id
      })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      // (res.data.data || []
      this.machineList = this.machineList.concat(res.data.data || [])
    }
  }
}
</script>
<style lang="less" scoped>
.repair_report_list {
  .repair_report_listt-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .search-btn {
    width: 80px;
  }
  .form-item {
    margin-right: 0px;
  }
}
</style>
<style lang="less">
.repair_report_list {
  .select-shop-item {
    height: 35px;
    width: 210px;
    .ivu-select-selection {
      height: 35px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ivu-tag {
      max-width: 100px;
    }
  }
}
</style>
